<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" :checked="todoIsDone.length===todos.length && todos.length >0 " @change="changeHandler" />
    </label>
    <span>
      <span>已完成{{ todoIsDone.length }}</span> / 全部{{ todos.length }}
    </span>
    <button class="btn btn-danger" @click="clickHandler">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["todos", "todoIsDone", "updateAllDone","deleteDoneTodo"],
  methods: {
    changeHandler(e) {
       //获取到复选框的勾选状态
      this.updateAllDone(e.target.checked);
    },
        //清除已经完成按钮的回调函数
    clickHandler(){
        //调用父组件的方法，通知父亲修改自身的数据！！！！
        this.deleteDoneTodo('我是子组件哦')
    }
  },
};
</script>

<style>
</style>